<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的二维码"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->
        <div class="qrcode-box">
            <div
                class="qrcode"
                ref="qrCodeUrl"
            ></div>
            <div class="qrcode-tips">长按二维码保存到手机</div>
        </div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import QRCode from 'qrcodejs2'
export default {
    name: 'MyCode',
    components: {
        CommonHeader
    },
    data() {
        return {
            userInfo: ''
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            this.makeCode()
        },
        makeCode() {
            let routeHref =
                window.location.origin + '?parent_id=' + this.userInfo.id
            let qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: routeHref,
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.qrcode-box
    position absolute
    top 1.11rem
    left 0
    right 0
    bottom 0
    background #fff
    display flex
    flex-direction column
    align-items center
    justify-content center
    .qrcode
        width 200px
    .qrcode-tips
        margin-top 0.37rem
        text-align center
        font-size 0.38rem
        color #333
</style>

